<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" :immediate-check="true" finish-text="没有更多了" @load="onLoad">
      <div class="list">
        <AppVideo v-for="item in videolist" :key="item.aid" :video="item" />
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import { getMMD3D } from "@/api/animation";
import type { Iarchives } from "./type";
import { ref } from "vue";
import AppVideo from "@/components/app-video-item.vue";
const videolist = ref<Iarchives[]>([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let page = ref(1);

const onLoad = () => {
  setTimeout(() => {
    getDance();
  }, 1000);
};

const getDance = async () => {
  try {
    let res = await getMMD3D(page.value);
    console.log(res);
    if (page.value === 1) {
      videolist.value = res.data.data.archives;
    } else {
      res.data.data.archives.forEach((element: Iarchives) => {
        videolist.value.push(element);
      });
      loading.value = false;
    }
    if (res.data.data.archives.length > 0) {
      page.value++;
      loading.value = false;
    } else {
      // 如果没有数据加载完毕
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
};

const onRefresh = () => {
  setTimeout(() => {
    getDance();
    refreshing.value = false;
  }, 1000);
};
</script>


<style lang="less" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1vw;
}
</style>
